fund uifund-access

1 files changed, 57 insertions, 31 deletions

diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index ae0a97c6..6cb3b05d 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -14,7 +14,7 @@
 
   let { data } = $props();
 
-  let { amount, payments, rate, user } = data;
+  let { amount, payments, managers, rate, user } = data;
   let { id } = $page.params;
   let locale = loc(user);
 
@@ -26,10 +26,10 @@
   let show = $state();
   let toggle = () => (show = !show);
   let href = $derived(encodeURIComponent($page.url.href));
-  let withdrawUrl = encoder.encode(
-    `${$page.url.origin}/api/fund/${id}/withdraw`,
-  );
-  let lnurlw = bech32.encode("lnurl", bech32.toWords(withdrawUrl), 20000);
+  // let withdrawUrl = encoder.encode(
+  //   `${$page.url.origin}/api/fund/${id}/withdraw`,
+  // );
+  // let lnurlw = bech32.encode("lnurl", bech32.toWords(withdrawUrl), 20000);
 </script>
 
 <div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5">
@@ -49,11 +49,35 @@
       <div class="flex justify-center gap-4">
         <Amount {amount} {currency} {rate} {locale} />
       </div>
-      <div class="flex">
-        <div>Access: <span class="font-bold">Anyone with the link</span></div>
-        <div class="ml-auto underline text-secondary"><a href={`/fund/${id}/access`}>Manage</a></div>
+      <div class="flex flex-wrap space-y-2 items-center">
+        <div class="grow text-center">
+          <div class="font-bold text-xl">
+            <div>{$t("funds.withdrawAccess")}</div>
+          </div>
+          {#if managers.length}
+            <div class="flex justify-center">
+              {#each managers as c, i}
+                <div class:-ml-3={i > 0}>
+                  <a href={`/pay/${c.username}`} class="contents">
+                    <Avatar user={c} size={12} />
+                  </a>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <div>{$t("funds.anyone")}</div>
+          {/if}
+        </div>
+
+        <a
+          href={`/fund/${id}/access`}
+          class="btn !w-auto ml-auto text-secondary grow"
+        >
+          <iconify-icon icon="ph:gear-bold" width={32}></iconify-icon>
+          {$t("funds.manage")}
+        </a>
       </div>
-      <div class="flex gap-2" data-sveltekit-prefetch="off">
+      <div class="flex flex-wrap gap-2" data-sveltekit-prefetch="off">
         <div class="grow">
           <a href={`/send/fund/${id}`}>
             <button class="btn">
@@ -63,19 +87,21 @@
             </button>
           </a>
         </div>
-        <div class="grow">
-          <a href={`/fund/${id}/withdraw`}>
-            <button class="btn">
-              <iconify-icon
-                noobserver
-                icon="ph:hand-coins-bold"
-                width="32"
-                flip="horizontal"
-              ></iconify-icon>
-              {$t("payments.takeFunds")}
-            </button>
-          </a>
-        </div>
+        {#if !managers.length || managers.some((m) => m.id === user.id)}
+          <div class="grow">
+            <a href={`/fund/${id}/withdraw`}>
+              <button class="btn">
+                <iconify-icon
+                  noobserver
+                  icon="ph:hand-coins-bold"
+                  width="32"
+                  flip="horizontal"
+                ></iconify-icon>
+                {$t("payments.takeFunds")}
+              </button>
+            </a>
+          </div>
+        {/if}
       </div>
       <div class="flex gap-2" data-sveltekit-prefetch="off">
         <a href={`/qr/${href}`} class="btn !w-auto grow">
@@ -83,15 +109,15 @@
           ></iconify-icon>
           <div class="my-auto">{$t("payments.shareLink")}</div>
         </a>
-        <a href={`/qr/${lnurlw}`} class="btn !w-auto grow">
-          <iconify-icon
-            noobserver
-            icon="ph:lightning-fill"
-            width="24"
-            class="text-yellow-300"
-          ></iconify-icon>
-          {$t("payments.lnurlw")}
-        </a>
+        <!-- <a href={`/qr/${lnurlw}`} class="btn !w-auto grow"> -->
+        <!--   <iconify-icon -->
+        <!--     noobserver -->
+        <!--     icon="ph:lightning-fill" -->
+        <!--     width="24" -->
+        <!--     class="text-yellow-300" -->
+        <!--   ></iconify-icon> -->
+        <!--   {$t("payments.lnurlw")} -->
+        <!-- </a> -->
       </div>
       <Payments {payments} fund={true} {locale} {user} />
     </div>